<template>
  <div>
    <div
      class="chart-wrapper"
      ref="chartBox"
      v-show="chartData.length > 0"
      style="width: 100%; height: 80rem"
    ></div>
    <!-- <el-empty description="暂无数据" v-show="chartData.length == 0" :image-size="60" /> -->
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce, nowSize } from "@/utils/util.js";
import { ElLoading, ElMessage } from "element-plus";

const chartBox = ref();
let myChart = ref(null);

// 传入数据
const props = defineProps({
  chartData: {
    type: Array,
    default: [],
  },
  keyList: Array, // 显示值的参数
  xAxisName: String, // 横坐标名称
  option: Object,
  chartType: {
    type: Array,
    default: [{ type: "bar", name: "value" }],
  }, // 显示几个图
  orient: {
    type: String,
    default: "horizontal",
  },
  linerColor: {
    type: [String, Array],
    default: ["#11100e", "#11100e"],
  },
  unit: {
    type: Array,
    default: ["件", "元"],
  },
  twoYAxis: Boolean,
});

const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize();
  }
}, 200);

onMounted(() => {
  setTimeout(() => {
    if (props.chartData.length == 0) return;
    getChartData();
  }, 1000);
  window.addEventListener("resize", resizeHandler);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
});

watch(
  () => props.chartData,
  (newVal, oldVal) => {
    getChartData();
  }
);

const getChartData = () => {
  nextTick(() => {
    initEcharts();
  });
};

const initEcharts = () => {
  myChart = echarts.init(chartBox.value);
  let option = {
    grid: {
      top: "25%",
      left: "0%",
      right: "1%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + ": " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      data: ["星沙分厂", "城北分厂", "城南分厂", "城西分厂"],
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        color: "#7190b6",
        fontSize: nowSize(12),
      },
    },
    yAxis: {
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false },
    },
    color: ["#7190b6"],
    series: [
      {
        name: "hill",
        type: "pictorialBar",
        // barCategoryGap: '-%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        label: {
          show: true,
          position: "top",
          color: "#7190b6",
          fontSize: nowSize(12),
          formatter: "{c}%",
        },
        symbol:
          "image://",
        itemStyle: {
          opacity: 0.5,
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
          },
        },
        data: props.chartData,
        z: 10,
      },
    ],
  };
  if (props.option) {
    option = Object.assign(option, props.option);
  }
  myChart.off("click");
  // myChart.on("click", function (params) {
  //     that.$emit("clickEchartIns", params); // 所选参数
  // });
  myChart.setOption(option, true);
};
</script>

<style scoped lang="less"></style>
